<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico">
        <title>Tracking</title>
        <link href="resources/css/bootstrap.min.css" rel="stylesheet">
        <link href="resources/css/tracking.css" rel="stylesheet">
        <script type="text/javascript" src="resources/js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBXvN4q5qK2gu9D4AFv-cIR_sFr4N6_Pt4"></script>
        <script type="text/javascript">
            var mapId = "map-canvas";
            var shipmentPos = new google.maps.LatLng(0, 0);
            var mapView;
            var zPoints = [];
            var zShipRoute = [];
            var iTimeOutVar;
            var s_Description;

            $(document).ready(function() {
                var mapOptions = {
                    center: shipmentPos,
                    zoom: 3
                };
                map = new google.maps.Map(document.getElementById(mapId), mapOptions);
                mapView = map;

            });

            /**
             * Draw the marker and clear the previous.
             */
            function drawMarker(payment,shipName) {

                $.ajax({
                    dataType: "json",
                    url: 'track/shipment/' + payment.id,
                    success: function(data) {
                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(data.longitude, data.latitude),
                            map: map,
                            title: shipName
                        });

                        map.setCenter(marker.getPosition());
                    }
                });

            }

            function AddPoint(iLat,iLong,sDescription,iID)
            {
                mapPoint = new google.maps.LatLng(iLat, iLong);

                var marker = new google.maps.Marker(
                        {
                            position: mapPoint,
                            //map: mapView,
                            ID:iID,
                            draggable:true,
                            animation: google.maps.Animation.DROP,
                        });

                var bAdded = false;
                for (var i = 0; i < zPoints.length; i++)
                {
                    if(zPoints[i]['ID'] == marker['ID'])
                    {
                        bAdded = true;
                        zPoints[i].setMap(null);
                        delete zPoints[i];
                        zPoints[i] = marker;
                    }
                }
                if(bAdded == false)
                    zPoints.push(marker);

                //marker.setMap(mapView);

                if(sDescription.length > 0)
                {
                    sDescription +=  "<p> Codinates : " + iLat + ":"+iLong + "</p>";
                    var infowindow = new google.maps.InfoWindow({content: sDescription});
                    google.maps.event.addListener(marker, 'click', function() {infowindow.open(mapView,marker);});
                    google.maps.event.addListener(mapView, 'click', function() {infowindow.close();});
                }
                ClearAllPoints();
                SetMapForPoints(mapView);
            }

            function SetMapForPoints(map)
            {
                for (var i = 0; i < zPoints.length; i++)
                {
                    zPoints[i].setMap(map);
                }
            }

            function ClearAllPoints()
            {
                SetMapForPoints(null);
            }

            function SimulateSipPath()
            {
                s_Description =	'<div>'+
                        '<table>'+
                        '<tr>'+
                        '<td>Ship Type:\n Cargo</td>'+
                        '</tr>'+
                        '<tr>'+
                        '<td>Length x Breadth:\n 112m x 14m</td>'+
                        '</tr>'+
                        '<tr>'+
                        '<td>Draught:\n6.5m</td>'+
                        '</tr>'+
                        '<td rowspan="3"><img src="ShipImg/ship1.jpg" style="width:100px;height:50px"/></td>'+
                        '</table>'+
                        '</div>';
                iTimeOutVar = setInterval(point1, 3000);
            }

            function point1()
            {
                AddPoint(-14.899738, 41.077590, s_Description, 3000);
                AddPoint(27.491215, -80.275747, s_Description, 2000);
                AddPoint(69.416530, 35.739871, s_Description, 1000);
                clearTimeout(iTimeOutVar);
                iTimeOutVar = setInterval(point2, 3000);
            }
            function point2()
            {
                AddPoint(-14.814785, 41.297316, s_Description, 3000);
                AddPoint(28.867092, -73.634732, s_Description, 2000);
                AddPoint(70.364009, 33.925807, s_Description, 1000);
                clearTimeout(iTimeOutVar);
                iTimeOutVar = setInterval(point3, 3000);
            }
            function point3()
            {
                AddPoint(-12.852042, 41.297316, s_Description, 3000);
                AddPoint(21.813464, -64.262075, s_Description, 2000);
                AddPoint(72.240101, 22.594955, s_Description, 1000);
                clearTimeout(iTimeOutVar);
                iTimeOutVar = setInterval(point4, 3000);
            }
            function point4()
            {
                AddPoint(-11.175778, 41.824660, s_Description, 3000);
                AddPoint(12.874457, -61.136685, s_Description, 2000);
                AddPoint(65.218831, 2.285183, s_Description, 1000);
                clearTimeout(iTimeOutVar);
                iTimeOutVar = setInterval(point5, 3000);
            }
            function point5()
            {
                AddPoint(-8.795583, 42.615676, s_Description, 3000);
                AddPoint(9.040582, -52.540983, s_Description, 2000);
                AddPoint(61.909627, -8.008561, s_Description, 1000);
                clearTimeout(iTimeOutVar);
                iTimeOutVar = setInterval(point6, 3000);
            }
            function point6()
            {
                AddPoint(-7.446973, 43.802199, s_Description, 3000);
                AddPoint(4.387702, -43.558560, s_Description, 2000);
                AddPoint(56.309281, -11.914420, s_Description, 1000);
                clearTimeout(iTimeOutVar);
                iTimeOutVar = setInterval(point7, 3000);
            }
            function point7()
            {
                AddPoint(-2.237968, 47.581496, s_Description, 3000);
                AddPoint(5.553988, -33.401925, s_Description, 2000);
                AddPoint(50.745972, -14.259341, s_Description, 1000);
                clearTimeout(iTimeOutVar);
                iTimeOutVar = setInterval(point8, 3000);
            }
            function point8()
            {
                AddPoint(21.464738, 69.356942, s_Description, 3000);
                AddPoint(4.776694, -24.025749, s_Description, 2000);
                AddPoint(47.686169, -6.447622, s_Description, 1000);
                clearTimeout(iTimeOutVar);
                iTimeOutVar = setInterval(point9, 3000);
            }
            function point9()
            {
                AddPoint(15.041795, 73.619637, s_Description, 3000);
                AddPoint(44.435731, -11.524186, s_Description, 1000);
                clearTimeout(iTimeOutVar);
                iTimeOutVar = setInterval(point10, 3000);
            }
            function point10()
            {
                AddPoint(8.837092, 76.022186, s_Description, 3000);
                AddPoint(4.776694, -9.573020, s_Description, 2000);
                AddPoint(36.736853, -10.353482, s_Description, 1000);
                clearTimeout(iTimeOutVar);
                iTimeOutVar = setInterval(point11, 3000);
            }
            function point11()
            {
                AddPoint(6.946385, 79.839935, s_Description, 3000);
                AddPoint(1.656610, 7.224635, s_Description, 2000);
                AddPoint(33.543673, -10.353482, s_Description, 1000);
                clearTimeout(iTimeOutVar);
            }



            function AddShipRoute(ShipPlanCoordinates,color,iiD)
            {
                var ShipPath = new google.maps.Polyline({
                    ID:iiD,
                    path: ShipPlanCoordinates,
                    geodesic: true,
                    strokeColor:color,
                    strokeOpacity: 1.0,
                    strokeWeight: 2,
                    simulateIndex: 0
                });

                var bAdded = false;
                for (var i = 0; i < zShipRoute.length; i++)
                {
                    if(zShipRoute[i]['ID'] == ShipPath['ID'])
                    {
                        bAdded = true;
                        zShipRoute[i].setMap(null);
                        delete zShipRoute[i];
                        zShipRoute[i] = ShipPath;
                    }
                }

                if(bAdded == false)
                    zShipRoute.push(ShipPath);

                ShipPath.setMap(mapView);
            }

            function PlotShipPaths()
            {
                var ShipPlanCoordinates = 	[
                    new google.maps.LatLng(-14.899738, 41.077590),
                    new google.maps.LatLng(-14.814785, 41.297316),
                    new google.maps.LatLng(-12.852042, 41.297316),
                    new google.maps.LatLng(-11.175778, 41.824660),
                    new google.maps.LatLng(-8.795583, 42.615676),
                    new google.maps.LatLng(-7.446973, 43.802199),
                    new google.maps.LatLng(-2.237968, 47.581496),
                    new google.maps.LatLng(5.006058, 54.173293),
                    new google.maps.LatLng(8.235883, 54.700636),
                    new google.maps.LatLng(15.117134, 56.985792),
                    new google.maps.LatLng(20.223475, 59.095167),
                    new google.maps.LatLng(23.147459, 60.525981),
                    new google.maps.LatLng(24.758218, 66.896005),
                    new google.maps.LatLng(21.464738, 69.356942),
                    new google.maps.LatLng(20.273959, 72.477059),
                    new google.maps.LatLng(15.041795, 73.619637),
                    new google.maps.LatLng(8.837092, 76.022186),
                    new google.maps.LatLng( 7.840835, 77.233492),
                    new google.maps.LatLng(6.946385, 79.839935)
                ];

                AddShipRoute(ShipPlanCoordinates,'#009900',1);

                ShipPlanCoordinates = [];
                ShipPlanCoordinates = 	[
                    new google.maps.LatLng(69.416530, 35.739871),
                    new google.maps.LatLng(70.364009, 33.925807),
                    new google.maps.LatLng(72.240101, 22.594955),
                    new google.maps.LatLng(65.218831, 2.285183),
                    new google.maps.LatLng(61.909627, -8.008561),
                    new google.maps.LatLng(56.309281, -11.914420),
                    new google.maps.LatLng(50.745972, -14.259341),
                    new google.maps.LatLng(47.686169, -6.447622),
                    new google.maps.LatLng(44.435731, -11.524186),
                    new google.maps.LatLng(36.736853, -10.353482),
                    new google.maps.LatLng(33.543673, -10.353482)
                ];

                AddShipRoute(ShipPlanCoordinates,'#FF0000',2);

                ShipPlanCoordinates = [];
                ShipPlanCoordinates = 		[
                    new google.maps.LatLng(27.491215, -80.275747),
                    new google.maps.LatLng(28.867092, -73.634732),
                    new google.maps.LatLng(21.813464, -64.262075),
                    new google.maps.LatLng(12.874457, -61.136685),
                    new google.maps.LatLng(9.040582, -52.540983),
                    new google.maps.LatLng(4.387702, -43.558560),
                    new google.maps.LatLng(5.553988, -33.401925),
                    new google.maps.LatLng(4.776694, -24.025749),
                    new google.maps.LatLng(4.776694, -9.573020),
                    new google.maps.LatLng(1.656610, 7.224635)
                ];
                AddShipRoute(ShipPlanCoordinates,'#3366FF',3);

                /*var ShipeSymbol = 	{	path: google.maps.SymbolPath.CIRCLE,
                 scale: 3,
                 strokeColor: '#FF0000'
                 };
                 */

                // Create the polyline and add the symbol to it via the 'icons' property.
                /*line = new google.maps.Polyline({	path: ShipPlanCoordinates,
                 icons: [{ icon: ShipeSymbol, offset: '100%'	}],
                 map: mapView,
                 });*/
                //AnimateShipRoute();

            }

            function drawRoute(payment) {

                $.ajax({
                    dataType: "json",
                    url: 'track/route/' + payment.id,
                    success: function(data) {
                        var shipRouteCoordinates = [];

                        for (var i = 0; i < data.length; i++) {
                            shipRouteCoordinates.push(new google.maps.LatLng(data[i].longitude, data[i].latitude));
                        }

                        var shipRoute = new google.maps.Polyline({
                            path: shipRouteCoordinates,
                            geodesic: true,
                            strokeColor: '#FF0000',
                            strokeOpacity: 1.0,
                            strokeWeight: 2
                        });

                        shipRoute.setMap(map);
//                        PlotShipPaths();
//                        SimulateSipPath();
                    }
                });

            }

            /**
             * Track ship and plot on map.
             */
            function track() {
                var shipmentReference = $('#shipment-reference').val();

                if (!shipmentReference || !shipmentReference.trim()) {
                    alert('Please provide the shipping reference id');
                }

                $.ajax({
                    dataType: "json",
                    url: 'track/ship/' + shipmentReference,
                    success: function(data) {
                        drawRoute(data);
                        drawMarker(data,data.declaration.schedule.ship.name);

                        $('#shipId').html(data.declaration.schedule.ship.id);
                        $('#shipName').html(data.declaration.schedule.ship.name);
                        $('#shipStatus').html('Sailing');
                        $('#shipDetails').show();
                    }
                });

            }

        </script>
    </head>

    <body>
        <jsp:include page="nav-bar.jsp" />
        <div class="container">

            <h2 class="form-signin-heading">Tracking Shipment</h2>
            <br />

            <h4>Please enter your Booking ID:</h4>
            <div id="shipment-tracking-form" class="form-group">
                <input id="shipment-reference" class="form-control" type="text" placeholder="Booking ID"/>
                <input class="btn btn-default track-button" value="Track" type="button" onclick="track();" />
            </div>    

            <div id="shipDetails">
                <h5>Ship Details</h5>
                <table>
                    <tr>
                        <td class="header">Ship ID</td>
                        <td id="shipId"></td>
                    </tr>
                    <tr>
                        <td class="header">Name</td>
                        <td id="shipName"></td>
                    </tr>
                    <tr>
                        <td class="header">Status</td>
                        <td id="shipStatus"></td>
                    </tr>
                </table>
            </div>

            <div id="map-canvas"></div>
        </div>
    </body>
</html>
